<template>
	<view>
		<!-- 		<view class="flex-white-plr26 ptb10 mt32 bdb_f5">
			<text class="mr26">付款单编号</text>
			<u-input disabled placeholder="自动生成" />
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="selectHkjhFun">
			<text class="mr26">付款计划</text>
			<view :class="hkjhCode ? '' : 'cBlack'">
				{{hkjhCode ? hkjhCode : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="selectHeTongFun">
			<text class="mr26">相关合同</text>
			<view :class="htName ? '' : 'cBlack'">
				{{htName ? htName : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view> -->
		<view class="flex-white-plr26 ptb20 mt32 bdb_f5" @click="selectKehuFun">
			<text class="mr26">供应商
				<text class="redXingh">*</text>
			</text>
			<view :class="supplier_name ? '' : 'cBlack'">
				{{supplier_name ? supplier_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view @click="pickerSelectFun('单据类型')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">单据类型</text>
			<view :class="bus_type_name ? '' : 'cBlack'">
				{{bus_type_name ? bus_type_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="glOrderFun">
			<text class="mr26">关联单据</text>
			<view :class="bus_name ? '' : 'cBlack'">
				{{bus_name ? bus_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
<!-- 		<view @click="pickerSelectFun('付款类型')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">付款类型</text>
			<view :class="backtype ? '' : 'cBlack'">
				{{backtype ? backtype : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view> -->
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">付款金额
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="money" input-align="right" placeholder="请输入付款金额" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">去零金额
				<text class="redXingh"></text>
			</text>
			<u-input v-model="zero_money" input-align="right" placeholder="请输入去零金额" />
		</view>
		<view @click="pickerSelectFun('付款方式')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">付款方式
				<text class="redXingh">*</text>
			</text>
			<view :class="bank_name ? '' : 'cBlack'">
				{{bank_name ? bank_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">付款日期<text class="redXingh">*</text></text>
			<picker mode="date" :value="pay_date" start="1999-02-15" end="2100-02-15" @change="bindDateChange">
				<view v-if="pay_date" class="w420">{{pay_date}}</view>
				<view v-else style="color: #c5c5c5;">请选择付款日期</view>
			</picker>
			<u-icon class="ml26" name="calendar" size="40" color="#888888"></u-icon>
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">付款期次</text>
			<u-input v-model="stages" input-align="right" placeholder="请输入付款期次" />
		</view>
		<view class="flex-white-plr26-column ptb20 mt32">
			<view style="margin-bottom: 8rpx;">
				<text>备注</text>
			</view>
			<u-input v-model="remark" type="textarea" :border="true" :height="100" :auto-height="true" />
		</view>
		<!--提交按钮-->
		<view class="submitView">
			<u-button type="primary" class="submitBtn" :ripple="true" ripple-bg-color="#909399" @click="submitBtn">
				{{pageType ? '保存' : '提交'}}
			</u-button>
		</view>
		<!--组件-->
		<u-select v-model="selectShow" :list="selectList" @confirm="selectConfirmFun"></u-select>
	</view>
</template>

<script>
	let that = ''
	import {getDayFun,getNowDate} from '@/utils/date.js'
	import {apiFinPayRecord,apiFinBankAccount,apiCstDict} from '@/api/crm.js'
	export default {
		data() {
			return {
				selectShow: false,
				selectList: [],
				cstDict:[],
				backtype:'',
				bank_account:[],
				rece_record_no: '',
				pay_date: '',
				money: '',
				zero_money:'',
				bank_name: '',
				bank_id: '',
				plan_id: '',
				stages: '',
				bus_type: '',
				bus_type_name:'',
				bus_id: '',
				bus_name: '',
				supplier_name: '',
				supplier_id: '',
				remark: '',
				owner_user_id: uni.$userInfo.id,
				create_user_id: uni.$userInfo.id,
				xgInfoObj: {},
				pageType: ''
			}
		},
		onLoad(e) {
			that = this;
			
			//判断当前页是否为修改
			if (e.type == 'update') {
				that.setDataFun();
				that.pageType = 'update';
				uni.setNavigationBarTitle({
					title: '修改付款信息'
				})
			}
			if (e.supplier_name) {
				that.supplier_name = e.supplier_name;
			}
			if (e.supplier_id) {
				that.supplier_id = e.supplier_id;
			}
			
			//获得字典
			that.getCstDict();
			
			uni.$on('hkjhBindFun', that.hkjhBindFun)
			uni.$on('supplierBindFun', that.supplierBindFun)
			uni.$on('glOrderBindFun', that.glOrderBindFun)
			},
		onBackPress() {
			uni.$off('hkjhBindFun', that.hkjhBindFun)
			uni.$off('supplierBindFun', that.supplierBindFun)
			uni.$off('glOrderBindFun', that.glOrderBindFun)
		},
		methods: {
			// 展示相应数据选择框
			pickerSelectFun: function(str) {
				if (str == '付款方式') {
					that.selectList = that.bank_account;
				} else if (str == '单据类型') {
					that.selectList = [
						{value: 'pos_contract',label: '采购合同'},
					]
				}else if (str == '付款类型') {
					that.selectList = that.cstDict.backtype
				}
				that.selectShow = true;
				that.selectType = str;
			},
			//选择框选中事件
			selectConfirmFun: function(e) {				
				if (that.selectType == '付款方式') {
					that.bank_name = e[0].label;
					that.bank_id = e[0].value;
				} else if (that.selectType == '单据类型') {
					that.bus_type = e[0].value;
					that.bus_type_name = e[0].label;
				}else if (that.selectType == '付款类型') {
					that.backtype = e[0].label;
				}
			},
			//选择时间绑定
			bindDateChange: function(e) {
				that.pay_date = e.detail.value;
			},
			// 选择付款计划
			selectHkjhFun: function() {
				uni.navigateTo({
					url: '../huikuanJH/huikuanJH?type=fin_rece_record'
				})
			},
			// 绑定付款计划
			hkjhBindFun: function(e) {
				console.log(e)
				that.hkjhCode = e.hkjhCode;
				that.hkjhId = e._id;
				that.htName = e.htName;
				that.htId = e.htId;
				that.supplier_name = e.supplier_name;
				that.clientId = e.clientId;
				that.money = e.hkPrice;
				that.bank_name = e.skType;
				// that.pay_date = e.date;
				// that.pay_dateTime = (new Date(e.date + ' 00:00:00')).getTime()
			},
			// 选择供应商
			selectKehuFun: function() {
				uni.navigateTo({
					url: '../sup_supplier/show?type=fin_pay_record'
				})
			},
			// 绑定供应商
			supplierBindFun: function(e) {
				console.log(e)
				if (that.supplier_id != '' && that.supplier_id != e.supplier_id) {
					that.plan_id = '';
					that.bus_id = '';
					that.money = '';
					that.bank_name = '';
				}
				that.supplier_id = e.supplier_id;
				that.supplier_name = e.supplier_name;
			},
			// 关联单据方法
			glOrderFun: function() {
				if (!that.supplier_id) {
					uni.$myModalFun('请先关联相关供应商！')
					return
				}
				if (!that.bus_type) {
					uni.$myModalFun('请先选择关联单据类型！')
					return
				}
				if (that.bus_type == 'pos_contract') {
					uni.navigateTo({
						url: '../pos_contract/show?type=pay_record&supplier_id=' + that.supplier_id
					})
				} else if (that.bus_type == 'project_purchase') {
					uni.navigateTo({
						url: '/pages/project/purchase/show?type=rece_record&supplier_id=' + that.supplier_id
					})
				}
			},
			// 关联单据回调绑定函数
			glOrderBindFun: function(e) {
				console.log('关联单据回调:', e, '当前单据类型:', that.bus_type);
				if (that.bus_type == 'pos_contract') {
					that.bus_id = e.id;
					that.bus_name = e.name;
					if (e.money && e.pay_money) {
						that.money = e.money - e.pay_money;
					}
				} else if (that.bus_type == 'sal_contract') {
					that.bus_id = e.id;
					that.bus_name = e.name;
					that.money = e.money-e.pay_money;
				} else if (that.bus_type == 'sal_order') {
					that.bus_id = e.id;
					that.bus_name = e.name;
					that.money = e.money;
				} 
			},
			
			// 新建或修改付款计划
			submitBtn: function() {
				if (!that.supplier_id) {
					uni.$myModalFun('相关供应商不能为空，请选择！')
					return
				}
				if (that.money == '') {
					uni.$myModalFun('付款金额不能为空，请输入！');
					return
				}
				if (that.bank_name == '') {
					uni.$myModalFun('付款账号不能为空，请输入！');
					return
				}
				if (that.pay_date == '') {
					uni.$myModalFun('付款日期不能为空，请选择！');
					return
				}
				let req = {
					supplier_id: that.supplier_id,
					supplier_name: that.supplier_name,
					bus_id: that.bus_id,
					bus_type: that.bus_type,
					bus_name: that.bus_name,
					money: that.money,
					pay_money:that.money,
					bank_id: that.bank_id,
					bank_name: that.bank_name,
					pay_date: that.pay_date,
					backtype: that.backtype,
					stages:that.stages,
					remark: that.remark,
					handle_user_id:that.owner_user_id,
					sys_user_id:that.owner_user_id,
					
				}
				let reqObj = {
					req
				}
				let action = 'add';
				if (that.pageType == 'update') {
					action = 'update'
					reqObj.req.id = that.xgInfoObj.id;
					uni.showLoading({
						title: '修改中...'
					})
				} else {
					reqObj.req.create_user_id = uni.$userInfo.id;
					reqObj.req.handle_user_id = uni.$userInfo.id;
					uni.showLoading({
						title: '提交中...'
					})
				}
				let reqData = {
					action: action,
					params: reqObj
				}
				apiFinPayRecord(reqData)
					.then(res => {
						if (action == 'update') {
							uni.showToast({
								title: '付款单修改成功',
								icon: 'none',
								duration: 1000,
								mask: true
							});
							uni.$hkdInfo=reqObj.req;
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: '付款单新增成功',
								icon: 'none',
								duration: 1000,
								mask: true
							})
							reqObj.req.id = res.data;
							uni.$emit('addHkdItemInListFun');//刷新列表数据
							setTimeout(() => {
								uni.redirectTo({
									url: './detail?index=0&fromDetail=true&id=' + res.data
								})
							}, 1000)
						}
					})
			},
			// 数据恢复
			setDataFun: function() {
				
	
				
				let obj = uni.$fkdInfo //当修改时加载默认信息
				that.xgInfoObj = uni.$fkdInfo
				console.log('数据恢复:');
	
				that.backtype = obj.backtype
				that.bus_id = obj.bus_id
				that.bus_type = obj.bus_type
				that.bus_name = obj.bus_info.name
				that.bus_type_name = obj.bus_info.type
				that.stages = obj.stages
				that.money = obj.money
				that.zero_money = obj.zero_money
				that.bank_id = obj.bank_id
				that.bank_name = obj.bank_name
				that.pay_date = obj.pay_date
				that.remark = obj.remark
				that.supplier_id = obj.supplier_id,
				that.supplier_name = obj.supplier_name
			},
			
			//获得字典
			getCstDict:function(){
				//载入字典
				let reqData = {
					action: 'get_list',
					params: {}
				}
				apiCstDict(reqData).then(res => {
						let dictArr = res.data;
						let newArr=[];
						for(var key in dictArr){
							let rowData=[];
							for (var i = 0; i < dictArr[key].length; i++) {
								rowData.push({
									label:dictArr[key][i].name,
									value:dictArr[key][i].id
								})
							}
							newArr[key]=rowData;
						}
						that.cstDict=newArr;
					});
					
					apiFinBankAccount(reqData).then(res => {
							let bankArr = res.data;
							let newArr=[];
							for(var key in bankArr){
								newArr.push({
									label: bankArr[key].name,
									value:bankArr[key].id
								})
							}
							that.bank_account=newArr;
						});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
